<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<html>
<head><title>登录</title></head>
<body>
<form action="LoginController" method="post" name="login" onsubmit="return validateForm()">
    <h1 align="center">账号登录</h1>

    <h3 align="center" style="color: red">${login_msg}</h3>
    <table cellpadding="5px" align="center">
        <tr><td><span style="font-family: 'Microsoft YaHei UI' ; color: black; font-size: large;">用 户:</span>
        </td><td><input name="username" style="height: 30px;width: 225px"></td></tr>
        <tr><td><span style="font-family: 'Microsoft YaHei UI' ; color: black; font-size: large">密 码:</span>
        </td><td><input name="password" style="height: 30px;width: 225px" type="password"></td></tr>
        <tr><td>    <span style="font-family: 'Microsoft YaHei UI' ; color: black; font-size: large">验证码：</span>
        </td><td><input name="InputCode" style="height: 35px;width: 90px">
            <img src="kaptcha" id="code" style="vertical-align: middle" onclick="f1()">
        </td></tr>
        <tr><td>    <span style="font-family: 'Microsoft YaHei UI' ; color: black; font-size: large">所在学院：</span>
        </td><td>    <select id="school" name="school" onchange="f()" style="height: 30px;width: 225px">
            <option value ="1">机械工程学院</option>
            <option value ="3">化学与化工学院</option>
            <option value ="4">电子工程与光电技术学院</option>
            <option value ="6">计算机科学与工程学院</option>
            <option value ="7">经济管理学院</option>
            <option value ="8">能源与动力工程学院</option>
            <option value ="10">自动化学院</option>
            <option value ="0">其他学院</option>
        </select></tr>
        <tr><td>    <span style="font-family: 'Microsoft YaHei UI' ; color: black; font-size: large">所在系：</span>
        </td><td>    <select id="department" name="department" style="height: 30px;width: 225px">
            <option value=0>机械1</option>
            <option value=1>机械2</option>
            <option value=2>机械3</option>
        </select></tr>
    </table>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div align="center">
        <input type="submit" value="登录" >
        &nbsp;&nbsp;<a href="help.html">帮助</a>&nbsp;&nbsp;
        <a href="ForgetPassword.jsp">忘记密码</a>
    </div>
    <script>
        const a = {};
        a["1"] = ['机械1','机械2','机械3'];
        a["3"] = ['化工'];
        a["4"] = ['电光1','电光2','电光3'];
        a["6"] = ['计算机科学与技术系','软件工程系','智能科学与技术系'];
        a["7"] = ['经管'];
        a["8"] = ['能动'];
        a["10"] = ['自动化'];
        a["0"] = ['其他'];
        function f() {
            const target1 = document.getElementById("school");
            const target2 = document.getElementById("department");
            //得到第一个下拉框的内容
            const selected_initial = target1.options[target1.selectedIndex].value;
            //清空第二个下拉框
            while (target2.options.length) {
                target2.remove(0);
            }
            //根据第一个下拉框的内容找到对应的列表
            const initial_list = a[selected_initial];
            if (initial_list) {
                for (let i = 0; i < initial_list.length; i++) {
                    const item = new Option(initial_list[i], i);
                    //将列表中的内容加入到第二个下拉框
                    target2.options.add(item);
                }
            }
        }

        function f1(){
            document.getElementById("code").src="kaptcha?"+new Date().getMilliseconds();
        }

        function validateForm()
        {
            let x = document.forms["login"]["username"].value;
            let y = document.forms["login"]["password"].value;
            let z = document.forms["login"]["InputCode"].value;
            if (x == null || x === "")
            {
                alert("请输入用户名！");
                return false;
            }else if(y == null || y === ""){
                alert("请输入登录密码！")
                return false;
            }else if(z == null || z === ""){
                alert("请输入验证码！")
                return false;
            }
            return true;
        }
    </script>

</form>
</body>
</html>